<template>
    <div>
        <el-card shadow="never">
            <vxe-grid ref='xGrid' v-bind="gridOptions" v-on="gridEvent">
                <template #logslot="{ row }">
                    <el-popover placement="top-start" :width="150" :height="150" trigger="hover">
                        <el-image style="width: 120px; height: 120px" :src="row.logo" fit="cover" />
                        <template #reference>
                            <el-image style="width: 36px; height: 36px" :src="row.logo" fit="cover" />
                        </template>
                    </el-popover>
                </template>

                <template #stateSlot="{ row }">
                    <div>
                        <!-- 定单状态:1 待付款 2 已支付 3 已完成 ' -->
                        <el-tag type="warning" v-if="row.state === 1">待支付
                        </el-tag>
                        <el-tag v-if="row.state === 2" type="success">成功
                        </el-tag>
                    </div>
                </template>

                <template #waySlot="{ row }">
                    <div>
                        <!-- 定单状态:1 待付款 2 已支付 3 已完成 ' -->
                        <el-tag type="warning" v-if="row.way === 'charge'">客户充值
                        </el-tag>
                        <el-tag v-if="row.way === 'reward'" type="success">返现奖励
                        </el-tag>
                    </div>
                </template>

            </vxe-grid>
        </el-card>
    </div>
</template>

<script setup lang="ts">
const { gridOptions } = useOrder();
const gridEvent: VxeGridListeners<RowVO> = {
    proxyQuery() {
        console.log('数据代理查询事件')
    },
    proxyDelete() {
        console.log('数据代理删除事件')
    },
    proxySave() {
        console.log('数据代理保存事件')
    }
}

</script>

<style scoped></style>